import { routerRedux } from 'dva/router';
import { auth, fetchUser } from '../services/app';
import { message } from 'antd';
import { parse } from 'qs';


export default {
  namespace: 'app',
  state: {
    isLogin: false,
    loading: false,
    user: {
      name: 'TMD'
    },
    loginButttonLoading: false,
    menuPopoverVisible: false,
    siderFold: localStorage.getItem('SiderFold') === 'true',
    darkTheme: localStorage.getItem('DarkTheme') !== 'false',
    isNavbar: document.body.clientWidth < 769
  },
  subscriptions: {
    setup: function({ history, dispatch,callback }) {
      dispatch({
        type: 'enterAuth',
        payload: ''
      })
    }
  },
  effects: { * auth({ payload }, { call, put }) {
      const { username, password } = payload;
      try {
        const data = yield call(auth, { username, password });
        if (data) {
          const { user, access_token } = data;
          const { token } = access_token;
          window.localStorage.setItem('tmdToken', token);
          yield put({
            type: 'authSuccess',
            payload: { account: user }
          });
          yield put(routerRedux.push('/dashboard'));
        }
      } catch (error) {
        message.error('用户名或密码错误');
      }
    },
    * enterAuth({ payload, onComplete }, { put, take }) {
      yield [put({ type: 'checkToken' }), put({ type: 'queryUser' })];
      yield [take('app/hasToken'), take('app/queryUserSuccess')];
      
    },
    * checkToken({ payload }, { put, call, select }) {
      const token = window.localStorage.getItem('tmdToken');
      // console.log(token);
      token ? yield put({ type: 'hasToken' }) : yield put({ type: 'authFail' })
    },
    * queryUser({ payload }, { put, call }) {
      const { data } = yield call(fetchUser);
      if (data.success) {
        yield put({
          type: 'queryUserSuccess',
          payload: { account: data.data.username }
        })
      }
    },
    * logout({ payload }, { put }) {
      yield put({ type: 'authFail' });
      window.localStorage.removeItem('tmdToken');
      yield put(routerRedux.push('login'));
    },
    * switchSider({ payload }, { put }) {
      yield put({ type: 'handleSwitchSider' });
    },
    * changeTheme({ payload }, { put }) {
      yield put({ type: 'handleChangeTheme' });
    },
    * changeNavbar({ payload }, { put }) {
      if (document.body.clientWidth < 769) {
        yield put({ type: 'showNavbar' });
      } else {
        yield put({ type: 'hideNavbar' });
      }
    },
    * switchMenuPopover({ payload }, { put }) {
      yield put({ type: 'handleSwitchMenuPopover' })
    }
  },
  reducers: {
    authSuccess(state, { payload }) {
      const { account } = payload;
      return {
        ...state,
        account,
        isLogin: true
      }
    },
    hasToken(state) {
      return {
        ...state,
        isLogin: true
      }
    },
    queryUserSuccess(state, { payload }) {
      const account = payload;
      return {
        ...state,
        account
      }
    },
    authFail(state) {
      return {
        ...state,
        isLogin: false,
        account: {
          username: null,
          user_id: null,
          email: null
        }
      }
    },
    showLoginButtonLoading(state) {
      return {
        ...state,
        loginButttonLoading: true
      }
    },
    showLoading(state) {
      return {
        ...state,
        loading: true
      }
    },
    hideLoading(state) {
      return {
        ...state,
        loading: false
      }
    },
    handleSwitchSider(state) {
      localStorage.setItem('SiderFold', !state.siderFold);
      return {
        ...state,
        siderFold: !state.siderFold
      }
    },
    handleChangeTheme(state) {

      localStorage.setItem('DarkTheme', !state.siderFold);
      return {
        ...state,
        darkTheme: !state.darkTheme
      }
    },
    showNavbar(state) {
      return {
        ...state,
        isNavbar: true
      }
    },
    hideNavbar(state) {
      return {
        ...state,
        isNavbar: false
      }
    },
    handleSwitchMenuPopover(state) {
      return {
        ...state,
        menuPopoverVisible: !state.menuPopoverVisible
      }
    },
  }
}
